<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>个人信息 - 个人博客</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#10B981',
            danger: '#EF4444',
            dark: '#1F2937',
            light: '#F9FAFB',
            'border-light': '#E5E7EB',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .btn {
        @apply px-3 py-1.5 rounded-xl font-medium transition-all duration-200 text-sm;
      }
      .btn-primary {
        @apply bg-primary text-white hover:bg-primary/90;
      }
      .btn-danger {
        @apply bg-danger text-white hover:bg-danger/90;
      }
      .post-card {
        @apply transition-all duration-300;
      }
      .post-card:last-child {
        @apply border-b-0;
      }
      .tab-active {
        @apply border-b-2 border-primary text-primary font-medium;
      }
      .tab-inactive {
        @apply text-gray-500 hover:text-gray-700;
      }
      .prose-custom {
        @apply max-w-none leading-relaxed text-gray-700;
      }
      .prose-custom p {
        @apply mb-3;
      }
      .metadata {
        @apply text-gray-500 text-sm mb-4 flex flex-wrap gap-x-4 gap-y-1;
      }
      .metadata-item {
        @apply flex items-center;
      }
      .metadata-item i {
        @apply mr-1.5 text-gray-400;
      }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen font-sans flex flex-col">
  <header class="bg-white shadow-sm">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <h1 class="text-xl font-bold text-blue-600">个人博客</h1>
      <div class="text-sm">
        {% if current_user.is_authenticated %}
        <div class="flex items-center space-x-3">
          <a href="{{ url_for('profile') }}" class="flex items-center text-gray-700 hover:text-primary">
            <img src="{{ current_user.get_avatar(28) }}" alt="{{ current_user.nickname }}" class="w-7 h-7 rounded-full mr-2"/>
            <span>{{ current_user.nickname or current_user.email.split('@')[0] }}</span>
          </a>
          <a href="{{ url_for('logout') }}" class="btn btn-danger px-2 py-1 text-xs">
            登出
          </a>
        </div>
        {% else %}
        <div class="flex space-x-1">
          <a href="{{ url_for('login') }}" class="btn btn-primary text-xs">登录</a>
          <a href="{{ url_for('register') }}" class="btn bg-green-500 hover:bg-green-600 text-white text-xs">注册</a>
        </div>
        {% endif %}
      </div>
    </div>
  </header>

  <div class="container mx-auto px-4 py-6 max-w-3xl flex-grow">
    <div class="mb-5">
      <a href="{{ url_for('index') }}" class="text-primary hover:underline text-sm inline-flex items-center">
        <i class="fa fa-arrow-left mr-1.5 text-xs"></i>返回首页
      </a>
    </div>

    <!-- 个人信息卡片 -->
    <div class="bg-white rounded-2xl p-6 mb-8 border border-border-light shadow">
      <div class="flex flex-col md:flex-row items-center md:items-start">
        <div class="mb-4 md:mb-0 md:mr-6 flex flex-col items-center">
          <img src="{{ user.get_avatar(120) }}" alt="{{ user.nickname }}" class="w-28 h-28 rounded-full mb-3 border-4 border-gray-100 shadow"/>
          <h2 class="text-lg font-bold text-center">{{ user.nickname or user.email.split('@')[0] }}</h2>
          <p class="text-gray-500 text-xs mb-3">{{ user.email }}</p>
          <a href="{{ url_for('edit_profile') }}" class="btn btn-primary text-xs">
            <i class="fa fa-pencil mr-1.5"></i>编辑资料
          </a>
        </div>
        <div class="flex-grow">
          <div class="mb-4">
            <h3 class="text-base font-medium mb-2">个人简介</h3>
            <p class="text-gray-700 bg-gray-50 p-3 rounded-xl text-sm">{{ user.bio|default('暂无简介', true) }}</p>
          </div>
          <div class="grid grid-cols-2 gap-3 text-center">
            <div class="bg-blue-50 p-3 rounded-xl text-xs">
              <div class="text-lg font-bold text-blue-600">{{ user_posts|length }}</div>
              <div class="text-gray-600">发布文章</div>
            </div>
            <div class="bg-green-50 p-3 rounded-xl text-xs">
              <div class="text-lg font-bold text-green-600">{{ viewed_posts|length }}</div>
              <div class="text-gray-600">浏览记录</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 选项卡 -->
    <div class="mb-6 border-b border-gray-200">
      <ul class="flex flex-wrap -mb-px text-sm" id="tabs">
        <li class="mr-4">
          <a href="#tab-posts" class="inline-block py-2 px-1 tab-active" data-tab="tab-posts">
            <i class="fa fa-file-text mr-1.5 text-xs"></i>我的文章
          </a>
        </li>
        <li class="mr-4">
          <a href="#tab-history" class="inline-block py-2 px-1 tab-inactive" data-tab="tab-history">
            <i class="fa fa-history mr-1.5 text-xs"></i>浏览历史
          </a>
        </li>
      </ul>
    </div>

    <!-- 内容区域 -->
    <div id="tab-content">
      <!-- 我的文章 -->
      <div id="tab-posts" class="tab-pane">
        {% if user_posts %}
        <div class="space-y-8">
          {% for post in user_posts %}
          <article class="post-card relative bg-white rounded-2xl p-6 border-2 border-blue-100 shadow-md hover:shadow-lg">
            <div class="absolute right-6 top-6 text-xs text-gray-500">
              <i class="fa fa-user mr-1"></i>{{ user.nickname or user.email.split('@')[0] }}
            </div>
            <h2 class="text-xl font-semibold mb-2">
              <a href="{{ url_for('view_post', post_id=post.id) }}" class="text-dark hover:text-primary transition-colors">
                {{ post.title }}
              </a>
            </h2>
            <div class="prose-custom text-sm mb-4">
              {{ post.content|truncate(180) }}
            </div>
            <div class="pt-3 border-t border-border-light text-right">
              <a href="{{ url_for('view_post', post_id=post.id) }}" class="text-primary text-sm hover:underline inline-flex items-center">
                阅读全文 <i class="fa fa-arrow-right ml-1 text-xs"></i>
              </a>
            </div>
          </article>
          {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-10 bg-white rounded-2xl border border-border-light shadow-md">
          <i class="fa fa-file-text-o text-4xl text-gray-200 mb-3"></i>
          <h3 class="text-base font-medium text-gray-500 mb-2">您还没有发布过文章</h3>
          <p class="text-gray-400 text-sm mb-4">点击下方按钮创建您的第一篇博客</p>
          <a href="{{ url_for('new_post') }}" class="btn btn-primary text-xs inline-flex items-center">
            <i class="fa fa-plus-circle mr-1.5 text-xs"></i>写新文章
          </a>
        </div>
        {% endif %}
      </div>

      <!-- 浏览历史 -->
      <div id="tab-history" class="tab-pane hidden">
        {% if viewed_posts %}
        <div class="space-y-8">
          {% for item in viewed_posts %}
          <article class="post-card relative bg-white rounded-2xl p-6 border-2 border-green-100 shadow-md hover:shadow-lg">
            <div class="absolute right-6 top-6 text-xs text-gray-500">
              <i class="fa fa-user mr-1"></i>{{ item.post.author_name }}
            </div>
            <h2 class="text-xl font-semibold mb-2">
              <a href="{{ url_for('view_post', post_id=item.post.id) }}" class="text-dark hover:text-primary transition-colors">
                {{ item.post.title }}
              </a>
            </h2>
            <div class="prose-custom text-sm mb-4">
              {{ item.post.content|truncate(180) }}
            </div>
            <div class="pt-3 border-t border-border-light text-right">
              <a href="{{ url_for('view_post', post_id=item.post.id) }}" class="text-primary text-sm hover:underline inline-flex items-center">
                阅读全文 <i class="fa fa-arrow-right ml-1 text-xs"></i>
              </a>
            </div>
          </article>
          {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-10 bg-white rounded-2xl border border-border-light shadow-md">
          <i class="fa fa-eye-slash text-4xl text-gray-200 mb-3"></i>
          <h3 class="text-base font-medium text-gray-500 mb-2">您还没有浏览过任何文章</h3>
          <p class="text-gray-400 text-sm mb-4">浏览文章后，它们将显示在这里</p>
          <a href="{{ url_for('index') }}" class="btn btn-primary text-xs inline-flex items-center">
            <i class="fa fa-book mr-1.5 text-xs"></i>浏览文章
          </a>
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <footer class="bg-dark text-white py-6 mt-12 text-xs">
    <div class="container mx-auto px-4 max-w-3xl text-center">
      <p>© {{ now.year }} 个人博客系统</p>
    </div>
  </footer>

  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    <div class="fixed bottom-4 right-4 z-50">
      {% for category, message in messages %}
      <div class="{{ 'bg-green-500' if category == 'success' else 'bg-red-500' }} text-white px-3 py-2 rounded-xl shadow-md mb-2 flex items-center text-xs">
        <i class="fa {{ 'fa-check-circle' if category == 'success' else 'fa-exclamation-circle' }} mr-2 text-xs"></i>
        <span>{{ message }}</span>
        <button class="ml-2 text-white hover:text-gray-200" onclick="this.parentElement.remove()">
          <i class="fa fa-times text-xs"></i>
        </button>
      </div>
      {% endfor %}
    </div>
    {% endif %}
  {% endwith %}

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const tabs = document.querySelectorAll('#tabs a');
      const tabPanes = document.querySelectorAll('.tab-pane');
      tabs.forEach(tab => {
        tab.addEventListener('click', function (e) {
          e.preventDefault();
          tabs.forEach(t => {
            t.classList.remove('tab-active');
            t.classList.add('tab-inactive');
          });
          tabPanes.forEach(pane => {
            pane.classList.add('hidden');
          });
          this.classList.add('tab-active');
          this.classList.remove('tab-inactive');
          const targetId = this.getAttribute('data-tab');
          document.getElementById(targetId).classList.remove('hidden');
        });
      });
      const footerYear = document.querySelector('footer p');
      if (footerYear) {
        footerYear.innerHTML = footerYear.innerHTML.replace('{{ now.year }}', new Date().getFullYear());
      }
    });
  </script>
</body>
</html>
